<template>
    <div>
        <form class="form-horizontal">
            <div class="form-group">
                <label  class="col-sm-2 control-label">姓名</label>
                <div class="col-sm-10">
                <input type="text" class="form-control"  placeholder="姓名" v-model="userObj.name">
                </div>
            </div>
            <div class="form-group">
                <label  class="col-sm-2 control-label">性别</label>
                <div class="col-sm-10">
               <label class="radio-inline">
                <input type="radio" name="gender" value="1" v-model="userObj.gender"> 男
                </label>
                <label class="radio-inline">
                <input type="radio" name="gender" value="2" v-model="userObj.gender"> 女
                </label>
                </div>
            </div>
             <div class="form-group">
                <label  class="col-sm-2 control-label">借书日期</label>
                <div class="col-sm-10">
                <input type="date" class="form-control" placeholder="借书日期" v-model="userObj.startTime">
                </div>
            </div>
             <div class="form-group">
                <label  class="col-sm-2 control-label">借书天数</label>
                <div class="col-sm-10">
                <input type="number" class="form-control" placeholder="借书天数" v-model="userObj.useDay">
                </div>
            </div>
            <div class="form-group">
                <label  class="col-sm-2 control-label">是否归还</label>
                <div class="col-sm-10">
                   <label class="checkbox-inline">
                    <input type="checkbox" id="inlineCheckbox1" value="" v-model="userObj.isback">是
                    </label>
                </div>
            </div> 
            <div class="form-group">
                <label  class="col-sm-2 control-label">图书类型</label>
                <div class="col-sm-10">
                   <select class="form-control" v-model="userObj.bookType">
                        <option>全部</option>
                        <option>美食</option>
                        <option>运动</option>
                        <option>金融</option>
                        <option>学习</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label  class="col-sm-2 control-label">选择图书</label>
                <div class="col-sm-10">
                       <button type="button" class="btn btn-primary btn-sm" @click="chooseBookClick">选择图书</button>
                </div>
            </div>
             <div class="form-group">
                <label  class="col-sm-2 control-label">已选图书</label>
                <div class="col-sm-10">
                    <button v-for="(item,index) in choosedBooks" :key="index" type="button" class="btn btn-primary btn-sm">{{item.bookName}} <span @click="removeBook(item)"> x</span> </button>
                 <!-- <button  type="button" class="btn btn-primary btn-sm">{{userObj.bookName}}</button> -->
                </div>
            </div> 
           
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                <button type="button" class="btn btn-default" @click="submitUserClick">提交</button>
                </div>
            </div>
        </form>
    </div>
</template>

<script>
import {mapActions,mapState,mapMutations} from 'vuex'
    export default {
        data(){
            return{
                userObj:{
                    name:'',
                    gender:'1',
                    startTime:'',
                    userDay:'',
                    isback:'',
                    bookType:'',
                    booksName:'',
                }
            }
        },
        computed:{
            ...mapState({
                choosedBooks:state =>state.user.choosedBook,
                catchUserObj:state =>state.user.catchUserObj
            })
        },
        methods:{
            // 派发store即vuex中的函数
            ...mapActions([
               'getBookAll','postUserList'
            ]),
            ...mapMutations([
                'getChoosedBook','catchUserObjData'
            ]),
            // 选择图书页面跳转 及将当前选择的值缓存 待选完图书后页面扔保留已填写信息
            chooseBookClick(){
                // 将当前选择的值缓存
                this.catchUserObjData(JSON.parse(JSON.stringify(this.userObj)))
                // 得到属于已选分类的书籍
                 this.getBookAll({router:this.$router,type:this.userObj.bookType})
                //  路由跳转页面
                 this.$router.push({name:'bookDetail'})
            },
            // 提交新增按钮  async  异步操作  等待await函数完成成功时获得status状态信息 ，才执行路由跳转信息
            // 但是async异步操作不能完成两部异步调取数据所以选择另一种promise方法
        //    async submitUserClick(){
        //        console.log(JSON.stringify(this.choosedBooks))
        //        this.userObj.booksName = JSON.stringify(this.choosedBooks)
        //        console.log(this.userObj)
        //        let status = await this.postUserList((this.userObj))
        //         // this.postUserList(this.userObj).then(
        //         //     this.$router.push('list')
        //         // )
        //        if(status){
        //           this.$router.push('list')
        //        }
        //     },
            // 确定新增用户信息
            submitUserClick(){
                // 先调的表格后增的用户
              // console.log(JSON.stringify(this.choosedBooks))
               this.userObj.booksName = JSON.stringify(this.choosedBooks)
               //console.log(this.userObj)
                this.postUserList(this.userObj)
                .then(res=>{
                    this.$router.push('list')
                }
                    
                )
              
            },
            // 对已选图书进行删除操作
            removeBook(item){
                // 不能直接对store中状态进行修改 但可以通过筛选 数据 赋值给一个临时数组 
                // 再将临时数组通过掉store中的同步函数  来实现重新赋值
                let arr= this.choosedBooks.filter((val,index)=>{
                    return val.id !=item.id
                })
                 this.getChoosedBook(arr)
            }
        },
        mounted(){
            // console.log(this.catchUserObj)
            // 从图示列表页跳回来时如果之前 已经在列表中填写数据 则让其显示在页面
            if(this.catchUserObj){
                this.userObj = this.catchUserObj
            }
        },
        // 组件内的守卫 若跳到当前页是不是从图书列表过来的 就给同步函数getChoosedBook传个空数组  即让choosedBooks为空
         beforeRouteEnter (to, from, next) {
            next(vm =>{
                // 跳转时从哪里来
                if(from.path != '/home/user/bookDetail'){
                    vm.getChoosedBook([])
                    // console.log(from.path)
                }
            })
        }
    }
</script>

<style scoped>

</style>